import IconFont from "@/components/IconFont";
import Style from "./index.module.less";
import { Button, Dropdown, Select, Menu, Space } from "antd";
const SelectActions = props => {
	const { options, name, width, onClick, type, children, ...args } = props;
	const hasMultiOptions = options?.length;

	// 没有传入options，默认为 button
	if (!hasMultiOptions) {
		return (
			<Button type={type || "ghost"} onClick={onClick}>
				{name ? name : children}
			</Button>
		);
	}

	// 有多个选项，显示下拉菜单 Dropdown
	// 组合成Dropdown.Item
	// key = e.key || e.value || e.label
	// onClick(key)
	const items = options.map(e => {
		const key = e.key || e.value || e.label;
		return {
			label: (
				<div
					className={Style.click_span}
					onClick={() => {
						onClick && onClick(key);
						e.action && e.action(e); //冗余方法回调1
						e.onClick && e.onClick(e); //冗余方法回调2
					}}
				>
					{e.label}
				</div>
			),
			key
		};
	});
	// 当有 children 插槽时，显示 插槽 作为 target
	// 当没有 children 插槽时，显示 Button 作为 target
	return (
		<Dropdown overlay={<Menu items={items} />} {...args}>
			{children ? (
				<Space className={Style.dropdown_item}>{children}</Space>
			) : (
				<Button className={Style.select_action_wrap}>
					{name} <IconFont type="icona-juxing11766" className={Style.symbol} style={{ position: "absolute" }} />
				</Button>
			)}
		</Dropdown>
	);
	// return (
	// 	<div className={Style.select_action_wrap}>
	// 		<Select
	// 			className={Style.select_action}
	// 			style={{ width }}
	// 			showArrow={false}
	// 			value={name}
	// 			onChange={(value, option) => {
	// 				option.action();
	// 			}}
	// 			{...args}
	// 		>
	// 			{options?.map((item, idx) => (
	// 				<Select.Option key={idx} value={idx} type="text" action={item.action}>
	// 					{item.label}
	// 				</Select.Option>
	// 			))}
	// 		</Select>
	// 		<div className={Style.symbol}>
	// 			<IconFont type="icona-juxing11766" />
	// 		</div>
	// 	</div>
	// );
};
export default SelectActions;
